<template>
	<div class="goodsItem">
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="handleGoodsDataClose"
			:dialogFooterBtn="true"
		>
			<section class="custom-dialog-body aftersale-detail">
				<main>
					<div class="warm-tip mb16">温馨提示: <br />1、如果同意申请，请发送正确的退货地址给买家 <br />2、如果拒绝申请，请发送给买家拒绝理由</div>
					<div class="status-content">
						<el-row :gutter="20" class="mb20">
							<el-col :span="8" class="mb20">
								<div class="status-text sd-flex mb6">
									<el-icon class="cursor-pointer color" @click="refreshStatus(state.data.id)">
										<Refresh />
									</el-icon>
									<span class="ml5" v-if="state.data.status == 0">申请后</span>
									<span class="ml5" v-if="state.data.status == 1">处理中</span>
									<span class="ml5" v-if="state.data.status == 2">已完成</span>
									<span class="ml5" v-if="state.data.status == 3">已取消</span>
									<span class="ml5" v-if="state.data.status == 4">已拒绝</span>
								</div>
								<div class="desc mb10">
									<span v-if="state.data.status == 0">卖家已申请</span>
									<span v-if="state.data.status == 1">卖家处理中</span>
									<span v-if="state.data.status == 2">售后已完成</span>
									<span v-if="state.data.status == 3">买家已取消</span>
									<span v-if="state.data.status == 4">卖家拒绝了售后申请</span>
								</div>

								<div class="tools mb20">
									<el-button type="primary" size="default" v-if="state.data.status == 0 || state.data.status == 1" @click="execution">
										立即处理
									</el-button>
								</div>
							</el-col>
							<el-col :span="16">
								<el-steps :active="active">
									<el-step>
										<template #title>
											<div>买家申请售后</div>
										</template>
										<template #description>
											<div>{{ state.createAfterSaleOrder.createTime }}</div>
											<!-- <div class="step-status">买家申请售后</div> -->
										</template>
									</el-step>
									<el-step title="售后申请处理中">
										<template #description>
											<div>{{ state.receiveAfterSaleOrder.createTime }}</div>
											<!-- <div class="step-status">售后申请处理中</div> -->
										</template>
									</el-step>
									<el-step title="处理完成">
										<template #description>
											<div>{{ state.finishAfterSaleOrder.createTime }}</div>
											<!-- <div class="step-status">处理完成</div> -->
										</template>
									</el-step>
								</el-steps>
							</el-col>
						</el-row>
					</div>

					<div class="refund-content mb26">
						<div class="title mb16">售后信息</div>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="subtitle mb12">交易信息</div>
								<div class="sd-flex mb8">
									<div class="label">用户信息：</div>
									<div class="content">{{ state.data.nickname }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">订单编号：</div>
									<div class="content">{{ state.data.orderId }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">物流状态：</div>
									<div class="content">这里加入判断....</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">订单实付：</div>
									<div class="content">¥ {{ state.data.orderVO.payFee }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">订单运费：</div>
									<div class="content">¥0.00</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">订单优惠：</div>
									<div class="content">¥{{ state.data.orderVO.discountFee }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">商品运费：</div>
									<div class="content">¥{{ state.data.orderVO.shippingFee }}</div>
								</div>
								<!-- <div class="sd-flex mb8">
                  <div class="label">商品优惠：</div>
                  <div class="content">¥12.00</div>
                </div> -->
								<div class="sd-flex mb8">
									<div class="label">建议退款：</div>
									<div class="content">¥-{{ state.data.refundPrice }}</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="subtitle mb12">售后信息</div>
								<div class="sd-flex mb8">
									<div class="label">售后单号：</div>
									<div class="content">{{ state.data.afterSaleSn }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">申请时间：</div>
									<div class="content">{{ state.data.createTime }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">联系电话：</div>
									<div class="content">{{ state.data.mobile }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">售后类型：</div>
									<div class="content">{{ state.data.typeText }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">实际退款：</div>
									<div class="content">¥{{ state.data.refundPrice }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">申请原因：</div>
									<div class="content">{{ state.data.reason }}</div>
								</div>
								<div class="sd-flex mb8">
									<div class="label">相关描述：</div>
									<div class="content">{{ state.data.remark }}</div>
								</div>
							</el-col>

							<el-col :span="24">
								<div class="subtitle mb">商品信息</div>
								<div class="sd-goods sd-flex sd-col-top goods-aftersale-detail">
									<div class="sd-image sd-flex" style="width: 64px; height: 64px; border-radius: 8px">
										<el-image :src="STATIC_URL + state.data.orderGoodsVO.image" fit="cover" class="cover-image" />
									</div>
									<div class="ml12 sd-flex-1">
										<!----><!----><!----><!---->
										<div class="title sd-table-line-1 mb6">{{ state.data.orderGoodsVO.title }}</div>
										<div class="sd-flex mb16">
											<div class="label">单价：</div>
											<div class="content sd-flex">
												<div class="price">{{ state.data.orderGoodsVO.price }}</div>
												<div class="num ml">x {{ state.data.orderGoodsVO.quantity }}</div>
											</div>
										</div>
										<div class="sd-flex">
											<div class="label">规格：</div>
											<div class="content">
												<span v-for="(sku, index) in state.data.orderGoodsVO.skus" :key="sku" :class="{ ml5: index != 0 }"> {{ sku }} </span>
											</div>
										</div>
										<!---->
									</div>
								</div>
							</el-col>
						</el-row>
					</div>

					<div class="log-content">
						<div class="title sd-flex sd-row-between">
							<div class="label">协商记录</div>
							<el-button size="small" type="primary" text @click="repeatAfterSaleLog">点击回复</el-button>
						</div>

						<div class="log-item sd-flex sd-col-top ml12" v-for="(item, index) in state.data.afterSaleOrderLogContentVOS" :key="index">
							<div class="sd-image-log sd-flex" style="width: 48px; height: 48px; border-radius: 24px">
								<el-image :src="STATIC_URL + item.avatar" fit="cover" class="cover-image" />
							</div>
							<div class="ml12">
								<div class="name smb4">{{ item.nickname == null ? item.revertUsername : item.nickname }}</div>
								<div class="create-time mb8">{{ item.createTime }}</div>
								<div class="log-type-text mb8">{{ item.statusText }}</div>
								<div class="content mb8">{{ item.content }}</div>
								<div class="sd-flex">
									<div class="log-image img" v-for="(v, index) in item.images" :key="index">
										<el-image :src="STATIC_URL + v" fit="cover" class="image" :preview-src-list="loadPreviewImages(item.images)" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</main>
			</section>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">关 闭</el-button>
				</span>
			</template>
		</CustomDialog>
		<AfterSaleOrderLogDialog ref="AfterSaleOrderLogDialogRef"></AfterSaleOrderLogDialog>
		<OrderDetailDialog ref="OrderDetailDialogRef"></OrderDetailDialog>
		<AfterSaleOrderLogExecutionDialog ref="AfterSaleOrderLogExecutionDialogRef"></AfterSaleOrderLogExecutionDialog>
	</div>
</template>
<script setup lang="ts">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { orderApi } from '/@/api/shop/aftersale';
import msg from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';
import _ from 'lodash';
import { Refresh } from '@element-plus/icons-vue';

const AfterSaleOrderLogDialog = defineAsyncComponent(() => import('./AfterSaleOrderLog.vue'));
const AfterSaleOrderLogDialogRef = ref();

const AfterSaleOrderLogExecutionDialog = defineAsyncComponent(() => import('./AfterSaleOrderExecution.vue'));
const AfterSaleOrderLogExecutionDialogRef = ref();

const OrderDetailDialog = defineAsyncComponent(() => import('/@/views/shop/order/Dialog.vue'));
const OrderDetailDialogRef = ref();
const active = ref(1);
const state = reactive({
	data: {
		orderVO: {},
		orderGoodsVO: {},
		afterSaleOrderLogContentVOS: [],
	} as any,
	createAfterSaleOrder: {
		createTime: '',
	},
	receiveAfterSaleOrder: {
		createTime: '',
	},
	finishAfterSaleOrder: {
		createTime: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '订单详情',
		submitTxt: '',
	},
});

const handleGoodsDataClose = () => {
	state.dialog.isShowDialog = false;
};

const onOpenDialog = async (id: string) => {
	initData(id);
	state.dialog.isShowDialog = true;
};

const initData = async (id: string) => {
	try {
		const { data } = await orderApi().view(id);
		state.data = data;
		resolveProcess(data.afterSaleOrderStatusProcess);
	} catch (error) {
		msg().error('售后订单详细信息失败');
	}
};

const resolveProcess = (process: any) => {
	_.forEach(process, (e: any) => {
		switch (e.status) {
			case 0:
				state.createAfterSaleOrder = {
					createTime: e.createTime,
				};
				break;
			case 1:
				state.receiveAfterSaleOrder = {
					createTime: e.createTime,
				};
				active.value = 2;
				break;
			default:
				state.finishAfterSaleOrder = {
					createTime: e.createTime,
				};
				active.value = 3;
		}
	});
};

const onCancel = () => {
	state.dialog.isShowDialog = false;
};

const refreshStatus = (id: string) => {
	initData(id);
};

const repeatAfterSaleLog = () => {
	AfterSaleOrderLogDialogRef.value.onOpenDialog(state.data.id);
};

const execution = () => {
	AfterSaleOrderLogExecutionDialogRef.value.onOpenDialog(state.data.id);
};

const loadPreviewImages = (images: string[]) => {
	let previewImages: string[] = [];
	images.forEach((e) => {
		previewImages.push(STATIC_URL + e);
	});
	return previewImages;
};

defineExpose({
	onOpenDialog,
});
</script>

<style lang="scss" scoped>
.order-detail .warm-tip {
	line-height: 16px;
	font-size: 12px;
	color: var(--sd-font);
}

.order-detail .status-content {
	border-radius: 8px;
	background: var(--sd-table-header-bg);
	padding: 20px;
}

.order-detail .status-content .remark {
	height: 32px;
	line-height: 32px;
	padding: 0 12px;
	background: var(--sd-table-striped);
	border-radius: 4px;
}

.order-detail .status-content .right-item {
	line-height: 16px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	font-size: 12px;
}

.order-detail .status-content .right .fee-content {
	height: 16px;
}

.order-detail .status-content .right-item .content {
	color: var(--sd-subtitle);
}

.order-detail .status-content .right-item .label {
	flex-shrink: 0;
	color: var(--sd-subfont);
}

.order-detail :deep(.el-tabs__content) {
	background: var(--sd-table-header-bg);
	border-radius: 8px;
	padding: 20px 20px 0;
}

.step-status {
	position: absolute;
	top: -12px;
	left: 50%;
	width: 60px;
	font-size: 16px;
}

.tabs-content .item .label {
	flex-shrink: 0;
	color: var(--sd-subfont);
}

.tabs-content .item .content {
	color: var(--sd-subfont);
}

.tabs-content .item {
	line-height: 24px;
	margin-bottom: 4px;
	display: flex;
	font-size: 12px;
}

.color {
	color: var(--el-color-primary);
}

.aftersale-detail .refund-content {
	padding: 20px 20px;
	background: #f7f7fa;
	border-radius: 8px;
}

.aftersale-detail .subtitle {
	line-height: 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sd-title);
}

.aftersale-detail .refund-content .label {
	line-height: 16px;
	font-size: 12px;
	color: var(--sd-subfont);
}

.aftersale-detail .refund-content .content {
	line-height: 16px;
	font-size: 12px;
	color: var(--sd-subtitle);
	display: flex;
	align-items: center;
}

.aftersale-detail .log-content .title {
	height: 16px;
	line-height: 16px;
	font-size: 16px;
	color: var(--sd-subtitle);
	overflow: hidden;
}

.sd-row-between {
	justify-content: space-between;
}

.aftersale-detail .log-content .log-item {
	padding: 16px 0;
	border-bottom: 1px solid #f3f3f3;
}

.aftersale-detail .log-content .log-item .name,
.aftersale-detail .log-content .log-item .create-time {
	line-height: 16px;
	font-size: 12px;
	color: var(--sd-subfont);
}

.aftersale-detail .status-text {
	line-height: 24px;
	font-size: 18px;
	font-weight: 600;
	color: var(--sd-title);
}

.aftersale-detail .status-content {
	padding: 20px 20px 0;
	background: #f7f7fa;
	border-radius: 8px;
}

.sd-image-log {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.log-image {
	height: 48px;
	width: 48px;
}
</style>
